<template>
    <div>
        <div>
            <div><el-card shadow="always" class="backgroundCard"></el-card></div>
            <div class="backgroundCardBox">
                <b>留言栏</b>
                <el-form ref="messageForm" :model="messageForm" :rules="rules" label-width="18vh" class="message-form">
                <el-form-item label="手机号：" prop="phoneNumber">
                    <el-input v-model="messageForm.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="留言内容：" prop="conversationContent">
                    <el-input type="textarea" placeholder="请输入留言内容（400字以内）" v-model="messageForm.conversationContent"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button round type="primary" @click="onSubmit" style="width: 15vh;">提交</el-button>
                </el-form-item>
            </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            messageForm: {
                phoneNumber: '',
                conversationContent: ''
            },
            rules: {
                phoneNumber: [
                    { required: true, message: '手机号不能为空', trigger: 'blur' }
                ],
                conversationContent: [
                    { required: true, message: '留言内容不能为空', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        onSubmit() {
            // 首先验证表单
            this.$refs.messageForm.validate((valid) => {
                if (valid) {
                    // 如果验证通过，收集表单数据
                    const formData = {
                        phoneNumber: this.messageForm.phoneNumber,
                        conversationContent: this.messageForm.conversationContent,
                    };
                    
                    // 使用axios发送POST请求到后端
                    axios.post('http://localhost:8089/serviceOnlineInsert', formData)
                        .then(response => {
                            console.log('Form submitted successfully:', response.data);
                            alert("留言提交成功，感谢您对本系统的支持");
                        })
                        .catch(error => {
                            console.error('Error submitting form:', error);
                        });
                } else {
                    console.error('Form validation failed');
                    return false;
                }
            });
        }
    }
}
</script>

<style>
    .backgroundCard {
        margin: 10% 30% 0 30%;
        background-color:rgb(246, 253, 253);
        width: 40%;
        height: 60vh;
        border-radius: 20px;
        box-shadow: 2px;
    }
    .backgroundCardBox {
        position: absolute;
        margin: -60vh 30% 0 30%;
        /* border: 1px solid black; */
        width: 39%;
        height: 60vh;
        border-radius: 20px;
        box-shadow: 2px;
    }
    .backgroundCardBox b{
        position: absolute;
        width: 100%;
        top: 5%;
        font-size: 25px;
        text-align: center;
    }
    .message-form {
    margin: 15% 15% 0 14%;
    }
    .message-form label{
        font-size: 20px;
        color:rgb(66, 66, 66);
    }
    .message-form input {
        border: 1px solid rgb(66, 66, 66);
    }
    .message-form textarea {
        margin-top: 1vh;
        width: 42vh;
        border: 1px solid rgb(66, 66, 66);
        resize: none;
        height: 20vh;
    }
</style>